<template>
    <div style="margin:20px auto;">
        <el-row justify="space-between">
            <el-col :span="1">
                <el-button size="small" color="#626aef" @click="isShowAdd=true">添加</el-button>
            </el-col>
        </el-row>
    </div>
    <el-table :data="users" style="width: 600px">
        <el-table-column label="用户名" width="180">
            <template #default="scope">
                    <el-tag>{{ scope.row.username }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="状态" width="180">
            <template #default="scope">
                <el-tag v-if="scope.row.status == 1" type="danger">禁用中</el-tag>
                <el-tag v-else type="success">使用中</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button v-if="scope.row.status == 1" type="primary" size="small" :disabled="scope.row.username === 'admin'" @click="updataStatus(scope.row.id)">启用</el-button>
                <el-button v-else type="warning" size="small" :disabled="scope.row.username === 'admin'" @click="updataStatus(scope.row.id)">禁用</el-button>
                <el-button size="small" :disabled="scope.row.username === 'admin'" type="danger" @click="">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 添加视图 -->
    <el-dialog v-model="isShowAdd" title="添加" width="400" center>
        <el-from label-width="auto" style="max-width: 600px">
            <el-form-item label="用户账号">
                <el-input v-model="name" />
            </el-form-item>
            <el-form-item label="用户密码">
                <el-input type="password" v-model="password" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmitAdd()">添加</el-button>
                <el-button @click="isShowAdd = false">取消</el-button>
            </el-form-item>
        </el-from>
    </el-dialog>
</template>

<script>
import { userLists,userAdd,userStatus,userDel } from '@/views/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue'

export default {
    data() {
        return {
            users: [],
            name: ref(''),
            password: ref(''),
            isShowAdd: ref(false),
        }
    },
    methods: {
        onSubmitAdd(){
            userAdd({
                username: this.name,
                password: this.password
            }).then(res => {
                if (res.data.data) {
                    this.isShowAdd = false;
                    setTimeout(2000)
                    ElMessageBox({
                        message: '添加成功',
                        type: 'success'
                    }).then(() => {
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '添加失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        },
        // 用户状态
        updataStatus(item){
            userStatus({
                id:item
            }).then(res => {
                if (res.data) {
                    ElMessage({
                        message: '成功',
                        type: 'success'
                    });
                    setTimeout(2000)
                    location.reload();
                } else {
                    ElMessage({
                        message: '失败',
                        type: 'error'
                    });
                    location.reload();
                }
            })
        },
        // 删除用户
        delUser(){

        }
    },
    mounted() {
        userLists().then(res => {
            this.users = res.data.data
        })
    }
}
</script>

<style></style>